<template>
    <div>
        <el-dialog @close="close(ruleFormRef)" center v-model="info.isShow" :title="info.isAdd ? '添加管理员' : '修改管理员'">
            <el-form :model="admin" ref="ruleFormRef" :rules="rules">
                <el-form-item label="所属角色" prop="roleid" :label-width="formLabelWidth">
                    <el-select v-model="admin.roleid" placeholder="请选择">
                        <el-option v-for="item in roleList" :key="item.id" :label="item.rolename" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名称" prop="username" :label-width="formLabelWidth">
                    <el-input v-model="admin.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-if="info.isAdd" type="password" v-model="admin.password" autocomplete="off" />
                    <el-input v-else disabled v-model="admin.password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="admin.status" class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1"
                        :inactive-value="2" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close(ruleFormRef)">取消</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef, info.isAdd)">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, defineProps, defineEmits, defineExpose, computed } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
// 提示弹窗
import { ElMessage } from 'element-plus'
// 引入仓库
import { useStore } from 'vuex'
// 引入接口
import { userAdd, userInfo, userEdit } from '@/request/app'
const formLabelWidth = '140px'
const ruleFormRef = ref<FormInstance>()
// 接收父组件信息,控制弹窗显示隐藏于标题
defineProps(['info'])
const admin = ref({
    roleid: '',
    username: '',
    password: '',
    status: 1,
})
// 接收编辑所需要的uid
let newuid = 0
// 校验规则
const rules = reactive<FormRules>({
    roleid: [
        { required: true, message: '请选择角色', trigger: 'blur' },
    ],
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 8, message: '用户名长度3到8位', trigger: 'blur' },
    ],
})
// 仓库
const store = useStore()
// 获取角色列表
let roleList = computed(() => store.getters['role/getRoleList'])
// 角色列表行动
let getRole = () => {
    // 若是从角色管理点击过来的，角色列表已经调用过有数据了，在这里就不再调用了
    // 如果角色列表没有内容就在这里调用接口
    if (roleList.value.length == 0) {
        store.dispatch('role/getRoleListAction')
    }
}
getRole()
// 置空表单
let reset = () => {
    admin.value = {
        roleid: '',
        username: '',
        password: '',
        status: 1,
    }
}
let emit = defineEmits(['close'])
// 取消按钮
let close = (formEl: FormInstance | undefined) => {
    // 子父通信 关闭弹窗
    emit('close')
    // 置空表单
    reset()
    if (!formEl) return
    // 清空校验信息
    formEl.resetFields()
}
// 回显
let lookup = (uid: number) => {
    console.log(uid, 'uid');
    newuid = uid
    // 调用查询一条数据接口
    userInfo({ uid })
        .then((res: any) => {
            console.log(res, '一条数据');
            admin.value = res.list
            //回现实密码不回显，不用更改
            admin.value.password = ''
        })
}
// 暴露子组件的lookup方法给父组件
defineExpose({
    lookup
})
// 确认按钮事件
const submitForm = async (formEl: FormInstance | undefined, isAdd: boolean) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('成功')
            console.log(admin.value, '表单');
            if (isAdd) {
                // 添加接口
                userAdd(admin.value)
                    .then((res: any) => {
                        console.log(res, '管理员添加');
                        if (res.code == 200) {
                            // 提示
                            ElMessage.success(res.msg)
                            // 重新调用列表
                            store.dispatch('admin/adminListAction')
                            // 总数
                            store.dispatch('admin/adminTotalAction')
                            // 关闭弹窗 清空验证
                            close(formEl)
                        } else {
                            // 提示
                            ElMessage.error(res.msg)
                        }
                    })
            } else {
                // 编辑接口
                userEdit({
                    ...admin.value,
                    uid: newuid
                })
                    .then((res: any) => {
                        console.log(res, '管理员编辑');
                        if (res.code == 200) {
                            // 提示
                            ElMessage.success(res.msg)
                            // 重新调用列表
                            store.dispatch('admin/adminListAction')
                            // 关闭弹窗 清空验证
                            close(formEl)
                        } else {
                            // 提示
                            ElMessage.error(res.msg)
                        }
                    })
            }
            // 清空校验信息
            formEl.resetFields()
        } else {
        }
    })
}

</script>

<style scoped>
</style>
